import QtQuick 1.0
import com.meego 1.0
import "Citys.js" as CityUtil
import "CommomUtil.js" as Util

Page {
    id:article_page

    tools: commonTools

    orientationLock : PageOrientation.LockPortrait

    //获取当前页面的load ，先赋值给menuModel ，加载菜单 ，然后加载list
    property bool loading: articleContentModel.status == XmlListModel.Loading

    property int pageTarget: 1 //动态的时候 再作修改

    property string currentTypeId: "0";   //当前的文章类型
    property int pageSize: 10;
    property int    pageIndex: 1;
    property int all_page_num: 1;

    property string title_image:"../images/articles/titleBack.png";
    property string title_city_image_down: "../images/articles/btn_down.png";
    property string title_city_image_up: "../images/articles/btn_up.png";

    //文章列表url地址
    property string base_url: "http://sp.autohome.com.cn/Nokia/ArticleList.ashx?type=1"

    property string article_list_url:base_url+"&Page="+pageIndex+"&count="+pageSize+"&TypeId="+currentTypeId+"&CityId="+currentCity;

    //菜单url地址
    property string article_menu_url: "http://sp.autohome.com.cn/Nokia/ArticleTypeList.ashx?type=1"

    property bool reflashCity: mainPage.pageStack.currentPage === mainPage

    //加载文章列表
    function loaderArticle(){
        articleContentModel.clear();
        articleContentModel.loadArticleList();
    }
    //获取更多文章
    function getMoreArticle(){
       articleContentModel.loadArticleList();
    }

    //菜单model
    ArticleMenuModel{
        id:menuModel
    }
    //文章列表model
    ArticleListModel{
        id:articleContentModel
    }

     //标题头
     Rectangle {
                 id:title_rect
                 width: article_page.width;height:71;
                 z:10
                 Image {
                     id: title
                     source: title_image
                     anchors.fill: parent
                 }
                 Image {
                     id: city_image
                     source: title_city_image_up
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.right:parent.right
                 }
                 Text{
                     id:city_name
                     text: reflashCity ? CityUtil.current_city : CityUtil.current_city
                     anchors.right: city_image.left
                     font { family: "Helvetica"; pointSize: 18; bold: true }
                     anchors.verticalCenter: parent.verticalCenter
                 }

                 MouseArea {
                     anchors.fill: city_image
                     onClicked: {
                         city_image.source=title_city_image_down
                         mainPage.pageStack.push(Qt.resolvedUrl("CitysPage.qml"));
                     }
                 }
           }
     //菜单
     Rectangle {
                 id:menu_rect
                 width: article_page.width; height: 71

                 anchors.top: title_rect.bottom
                 z:10

                 ListView {
                    // focus: true
                     id: categories
                     anchors.fill: parent
                     anchors.centerIn: parent
                     model: menuModel
                     delegate: ArticleMenu {}
                     orientation: "Horizontal"
                     //设置高亮显示
                    // highlight:Rectangle{color:"steelblue"}
                     highlightMoveSpeed:9999999

                 }
          }

     //文章列表
     Rectangle{
       id:listContent_rect
       width:article_page.width
       height: article_page.currentTypeId !="0" ? article_page.height:article_page.height-220
       anchors.top: menu_rect.bottom

       Row{
           //展示的内容

                FlickListView {
                           id: article_list
                           width: listContent_rect.width
                           height: listContent_rect.height
                           model: articleContentModel
                           delegate: ArticleList{
                                articleType: itemType
                           }
                           //header:listview_header
                           footer:article_footer


                 }

          }
       Component {
              id: article_footer
              Item {
                  id:foot_item
                  width: listContent_rect.width; height: 100
                 // anchors.top: listContent_rect.bottom
                Rectangle{
                    id:more_btn_rect
                    width: parent.width;height: parent.height
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    color:"#ebeff9"
                 }
                 Text {
                      text: "更多文章"
                      font { family: "Helvetica";  bold: true ;pointSize:20}
                      anchors {
                          horizontalCenter: more_btn_rect.horizontalCenter
                          verticalCenter: more_btn_rect.verticalCenter

                      }
                  }
                  MouseArea {
                      anchors.fill: foot_item
                      onClicked:{
                          // articleContentModel.getMoreArticle();
                          //getMoreArticle();
                           //点击获取更多文章内容
                          var nextPage = pageIndex +1;
                          article_page.pageIndex=nextPage;

                          article_list_url =base_url+"&Page="+nextPage+"&count="+pageSize+"&TypeId="+CityUtil.current_city+"&CityId="+CityUtil.current_city;

                             console.log("get more article:"+nextPage);
                          console.log("article_list.count:"+article_list.count);
                          console.log("all_page_num"+all_page_num);

                          if(article_list.count < article_page.all_page_num){
                              console.log("request more article:");

                              var doc = new XMLHttpRequest();
                              doc.onreadystatechange = function() {
                                  if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
                                  } else if (doc.readyState == XMLHttpRequest.DONE) {
                                      var a = doc.responseXML.documentElement;

                                      var numNum =a.childNodes[0].childNodes[0].childNodes[0].nodeValue;
                                      article_page.all_page_num=numNum;//总文章数

                                      for (var i = 2; i < a.childNodes[0].childNodes.length; ++i) {//节点<Articles>


                                          if(a.childNodes[0].childNodes[i] !== null && a.childNodes[0].childNodes[i].childNodes.length > 1){ // 去掉text节点
                                              console.log("index:"+i);
                                              var title =      a.childNodes[0].childNodes[i].childNodes[0].childNodes[0].nodeValue; //节点<Article>
                                               var articleId =  a.childNodes[0].childNodes[i].childNodes[1].childNodes[0].nodeValue;
                                              var publishTime =  a.childNodes[0].childNodes[i].childNodes[2].childNodes[0].nodeValue;
                                              var img =  a.childNodes[0].childNodes[i].childNodes[3].childNodes[0].nodeValue;
                                              var replyCount =  a.childNodes[0].childNodes[i].childNodes[4].childNodes[0].nodeValue;
                                              var content = a.childNodes[0].childNodes[i].childNodes[5].childNodes[0].nodeValue;
                                            //  console.log("content:"+content);
                                              articleContentModel.append({"itemType":"content","articleId":articleId,"articleTitle":title,"articlePublishTime":publishTime,"articleContent":content,"articleImage":img,"replyCount":replyCount});
                                          }
                                      }
                                  }
                              }

                              doc.open("GET", article_list_url);
                              doc.send();
                          }

                      }
                  }
              }
          }
    }

      //组件状态
       Component.onCompleted: {
           console.log("article page on completed");
       }

}
